<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="flexible.js"></script>
    <style>
        html,body{
            width:100%;
            height:100%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        #all{
            width:100%;
            height:100%;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="all">
<div>122323</div>
<div>122323</div>
<div>122323</div>
<div style="width:10rem;overflow:hidden;" id="d1">
<div style="width:30rem;height:6rem;display:flex;flex-wrap: nowrap;" id="d2">
    <div id="d3" style="width:10rem;height:6rem;background:red;transition:all .3s;
    "></div>
    <div id="d4" style="width:10rem;height:6rem;background:green;"></div>
    <div id="d5" style="width:10rem;height:6rem;background:purple;"></div>
</div>
</div>
</div>
<script>
    var startX;
    var endX;
    var diff;
    var i = 0;

    d1.addEventListener("touchstart",function(e){
       // console.log(1);
        //console.log(e);
        startX = e.touches[0].clientX
    })

    d1.addEventListener("touchmove",function(e){
       // console.log(2);
       // console.log(e);
        endX = e.touches[0].clientX
        diff = startX - endX
        d3.style.transition="";
        d4.style.transition="";
        d5.style.transition="";

        d3.style.transform = "translate(-" + (diff+i*640)+ "px,0px)";
        d4.style.transform = "translate(-" + (diff+i*640) + "px,0px)";
        d5.style.transform = "translate(-" + (diff+i*640) + "px,0px)";

        e.preventDefault();
    })

    d1.addEventListener("touchend",function(e){
        d3.style.transition="all .3s";
        d4.style.transition="all .3s";
      //  console.log(diff+" "+rootSZ*5)
        i++;
        if((diff+(i-1)*640)>100) {
            d3.style.transform = "translate(-"+i*640+"px,0px)";
            d4.style.transform = "translate(-"+i*640+"px,0px)";
            d5.style.transform = "translate(-"+i*640+"px,0px)";
        }else{
            d3.style.transform = "translate("+(i-1)*640+"px,0px)";
            d4.style.transform = "translate("+(i-1)*640+"px,0px)";
            d5.style.transform = "translate("+(i-1)*640+"px,0px)";
        }
       // console.log(3);
      //  console.log(e);
       // console.log(e.touches[0].clientX)
    })
</script>

</body>
</html>